<script setup lang="ts">
import type { VxeGridProps } from '@vben/plugins/src/vxe-table/types';

import type { VbenFormProps } from '#/adapter/form';

import { useVbenModal } from '@vben/common-ui';

import { message, Modal } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { genModelQueryTableListApi } from '#/api/gen/model';
import { onlineDataSourceQueryListApi } from '#/api/onlineDesign/dataSource';

interface RowType {
  tableName: string;
  tableDes: string;
}

const formOptions: VbenFormProps = {
  wrapperClass: 'grid-cols-2',
  showDefaultActions: false,
  submitOnChange: true,
  commonConfig: {
    colon: true,
    labelWidth: 80,
  },
  schema: [
    {
      component: 'ApiSelect',
      componentProps: {
        afterFetch: (data) => {
          return data.map((item: any) => ({
            label: item.dbName,
            value: item.id,
          }));
        },
        api: onlineDataSourceQueryListApi,
        placeholder: '请选择数据源',
        allowClear: true,
      },
      fieldName: 'id',
      label: '数据源',
      formItemClass: 'col-span-2 items-baseline',
    },
  ],
};

const gridOptions: VxeGridProps<RowType> = {
  pagerConfig: {
    // 分页
    enabled: false,
  },
  checkboxConfig: {
    labelField: 'name',
    checkMethod: ({ row }) => {
      return row.alreadyImport === 1;
    },
  },
  columns: [
    { align: 'left', type: 'checkbox', width: 50 },
    { title: '序号', type: 'seq', width: 50 },
    { title: '表名称', field: 'tableName' },
    { title: '表描述', field: 'remark' },
    {
      title: '导入状态',
      field: 'alreadyImport',
      slots: { default: 'alreadyImport' },
    },
  ],
  proxyConfig: {
    autoLoad: false,
    ajax: {
      query: async ({ page }, formValues) => {
        return await genModelQueryTableListApi({
          page: page.currentPage,
          pageSize: page.pageSize,
          ...formValues,
        });
      },
    },
  },
};

const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions });

const [ImportModal, modalApi] = useVbenModal({
  title: '导入表结构',
  onCancel: () => {
    modalApi.close();
  },
  onConfirm: onSubmit,
});
async function onSubmit() {
  const checkboxRecords = gridApi.grid.getCheckboxRecords();
  if (checkboxRecords.length === 0) {
    message.warn('至少选中一行');
  } else if (checkboxRecords.length > 1) {
    message.warn('至多选中一行');
  } else {
    Modal.confirm({
      title: `确认导入「${checkboxRecords[0]?.remark}」数据?`,
      async onOk() {
        const values = await gridApi.formApi.getValues();
        const params = {
          dataSourceId: values?.id,
          modelCode: checkboxRecords[0]?.tableName,
          modelName: checkboxRecords[0]?.remark,
        };
        modalApi.setData(params);
        await modalApi.close();
      },
      class: 'test',
    });
  }
}
</script>

<template>
  <ImportModal>
    <Grid table-title="数据表">
      <template #alreadyImport="{ row }">
        <a-tag color="pink" v-if="row.alreadyImport === 1">未导入</a-tag>
        <a-tag color="cyan" v-else>已导入</a-tag>
      </template>
    </Grid>
  </ImportModal>
</template>
